<!--
 * @Descripttion: 营销标签dialog
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-16 10:25:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-16 15:37:53
-->
<template>
  <div class="all-dialog">
    <div class="left-side">
      <div class="search-box">
        <el-input
          v-model="inputNumber"
          placeholder="标签编号"
        />
        <el-input
          v-model="inputLabel"
          placeholder="请输入标签名称"
        />
        <button class="search-button">查询</button>
      </div>
      <div class="label-box">
        <p class="subtitle">
          <span class="product-info">产品信息</span>
          <span class="select">选择</span>
        </p>
        <div class="all-label">
          <el-checkbox-group
            v-model="checkList"
          >
            <template
              v-for="(item, index) in productList"
              :key="index"
            >
              <el-checkbox label="复选框 A">
                <div>{{ item.title }}</div>
                <div>{{ item.number }}</div>
              </el-checkbox>
            </template>
            
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="right-side">
      <p class="title">
        <span class="selected">已选标签</span>
        <span>(最多5个，当前4/5)</span>
      </p>
      <p class="subtitle">
        <span class="product-info">产品信息</span>
        <span>必选</span>
      </p>
      <div class="all-selected">
        <span class="selected-item">
          <span>
            <span>低价保障</span>
            <span>123456</span>
          </span>
          <i class="el-icon-delete" />
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
// import { MarketingLabelModel } from '@/model/marketingLabel'

export default defineComponent({
  props: {
    productList: {
      type: Array,
      default: () => [
        {
          id: 0,
          title: '低价保障',
          number: 12345
        },
        {
          id: 1,
          title: '蜜月游',
          number: 12345
        },
        {
          id: 2,
          title: '亲子游',
          number: 12345
        },
        {        
          id: 3,
          title: '星光酒店',
          number: 12345
        }
      ]
    }
  },
  setup() {
    const inputNumber = ref(null)
    const inputLabel = ref('')
    const checkList = ref(['选中且禁用', '复选框 A'])

    return {
      inputNumber,
      inputLabel,
      checkList
    }
  }
})
</script>

<style lang="scss" scoped>
.all-dialog {
  width: 100%;
  display: grid;
  grid-template-columns: 53% 43%;
  grid-column-gap: 2%;
}
.search-box {
  display: grid;
  grid-template-columns: 25% 60% 12%;
  grid-column-gap: 2%;
  .search-button {
    padding: 3px 5px;
    height: 30px;
    width: 43px;
    margin-top: 5px;
  }
}
:deep .el-input__inner {
  height: 30px;
}
.label-box {
  .subtitle {
    height: 33px;
    line-height: 33px;
    padding-left: 10px;
    background-color: #F2F2F2;
    display: grid;
    grid-template-columns: 80% 20%;
  }
  .product-info {
    font-weight: 700;
  }
  .all-label {
    .el-checkbox {
      width: 25%;
      // display: flex;
    }
    .el-checkbox__label {
      // display: flex;
      // flex-direction: column;
    }
  }
}

.right-side {
  .title {
    height: 25px;
    line-height: 25px;
  }
  .selected {
    font-weight: 700;
  }
  .subtitle {
    height: 33px;
    line-height: 33px;
    width: 100%;
    background-color: #F2F2F2;
    display: grid;
    grid-template-columns: 85% 15%;
    .product-info {
      font-weight: 700;
      padding-left: 10px;
    }
  }
  .all-selected  {
    display: flex;
  }
  .selected-item {
    width: 30%;
    display: grid;
    grid-template-columns: 90% 10%;
    grid-column-gap: 2px;
    margin-right: 13px;
  }
}
</style>
